1"use client";
2
3import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
4import { useActionState, useState } from "react";
5import {
6  type CreateQuestionActionResult,
7  createQuestionAction,
8} from "@/actions";
9import { Dialog, DialogContent, DialogTitle } from "@/ui/dialog";
10
11export function CreateQuestionDialog({
12  open,
13  setOpen,
14  owner,
15  repo,
16}: {
17  open: boolean;
18  setOpen: (open: boolean) => void;
19  owner: string;
20  repo: string;
21}) {
22  const [title, setTitle] = useState("");
23  const [body, setBody] = useState("");
24
25  const createQuestion = createQuestionAction.bind(null, owner, repo);
26  const [state, formAction, isPending] = useActionState(
27    async (_prev: CreateQuestionActionResult | null, formData: FormData) => {
28      const result = await createQuestion(formData);
29      if ("question" in result) {
30        setOpen(false);
31        setTitle("");
32        setBody("");
33      }
34      return result;
35    },
36    null,
37  );
38
39  const isValid = title.trim() !== "" && body.trim() !== "";
40
41  return (
42    <Dialog open={open} onOpenChange={setOpen}>
43      <DialogContent
44        className="max-w-2xl min-w-2xl border-black rounded-xs shadow-2xl top-[35%] p-0 overflow-hidden"
45        animations={true}
46        showOverlay={true}
47      >
48        <VisuallyHidden>
49          <DialogTitle title={"Create question"} />
50        </VisuallyHidden>
51        <form action={formAction} className="relative">
52          <input
53            type="text"
54            name="title"
55            placeholder="Question title..."
56            value={title}
57            onChange={(e) => setTitle(e.target.value)}
58            className="w-full p-2 bg-background outline-none border-b border-border"
59            disabled={isPending}
60            autoFocus
61          />
62          <textarea
63            name="body"
64            placeholder="Write a description..."
65            value={body}
66            onChange={(e) => setBody(e.target.value)}
67            className="w-full p-2 text-sm bg-background outline-none resize-none min-h-32"
68            disabled={isPending}
69          />
70          {state && "error" in state && (
71            <p className="text-xs text-red-500 px-3 pb-2">{state.error}</p>
72          )}
73          <div className="flex items-center justify-between pl-2 py-2 border-t border-border h-9">
74            <span className="text-xs text-muted-foreground">
75              Ask a question in{" "}
76              <span className="text-foreground">
77                {owner}/{repo}
78              </span>
79            </span>
80            <div>
81              <button
82                type="reset"
83                className="px-3 py-1.5 h-9 text-xs border-b border-l border-r hover:bg-accent/50"
84                onClick={() => setOpen(false)}
85              >
86                Cancel
87              </button>
88              <button
89                type="submit"
90                disabled={!isValid || isPending}
91                className="px-3 py-1.5 h-9 text-xs bg-primary text-primary-foreground disabled:opacity-50 disabled:cursor-not-allowed"
92              >
93                {isPending ? "Creating..." : "Ask"}
94              </button>
95            </div>
96          </div>
97        </form>
98      </DialogContent>
99    </Dialog>
100  );
101}
102